<template>
    <div class="VipTop">美团会员</div>
    <div class="VipBG">
        <div class="VipSheng">开通会员 预计可省<a>166元</a>/月</div>
        <div class="VipQuan">
            <p class="VipQuantop1">每月享<a>6张</a>红包 价值<a>30元</a></p>
            <p class="VipQuantop2">可用范围</p>
            <img class=youHuiQuan src="src/assets/img/waimai/VIP/youHuiQuan.jpg" @click="huiyuan">
            <div class="Vipdiv">更多特权</div>
            <ul class="VipQuan">
                <li>
                    <img src="src/assets/img/waimai/VIP/sjdehb.jpg">
                    <span class="VipSpan">升额大红包</span>
                    <span class="VipSpanGray">&nbsp立省更多</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/jlb.jpg">
                    <span class="VipSpan">加量包</span>
                    <span class="VipSpanGray">优惠买红包</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/mphb.jpg">
                    <span class="VipSpan">免配红包</span>
                    <span class="VipSpanGray">最高减10元</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/hcpjsk.jpg">
                    <span class="VipSpan">火车票加速卡</span>
                    <span class="VipSpanGray">&nbsp价值70元</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/qcphb.jpg">
                    <span class="VipSpan">汽车票红包</span>
                    <span class="VipSpanGray">&nbsp&nbsp2元红包</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/fjphb.jpg">
                    <span class="VipSpan">美团机票红包</span>
                    <span class="VipSpanGray">5元无门槛</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/yxzq.jpg">
                    <span class="VipSpan">优选专区</span>
                    <span class="VipSpanGray">精选好物</span>
                </li>
                <li>
                    <img src="src/assets/img/waimai/VIP/hyr.jpg">
                    <span class="VipSpan">会员日</span>
                    <span class="VipSpanGray">专属折扣菜</span>
                </li>
                <div class="KaiTong">￥<a class="a15">15</a> 开通会员</div>
                <div class="VipSpanGray1">放心开通，不自动续费</div>
                <div class="VipSpanGray2"></div>
                <div class="VipSpanGray1">购买即视为同意<a>《美团会员服务协议》</a>|会员规则</div>
            </ul>
            <StoresComFls style="width:90vw;margin:40px auto"></StoresComFls>

        </div>
    </div>

    <BottomWch/>
</template>

<script>
    import BottomWch from "../../components/TakeOutFoodWch/BottomWch.vue";
    import StoresComFls from "../../components/StoresComFls.vue";

    export default {
        name: "VIPView",
        components: {StoresComFls, BottomWch},
        methods: {
            huiyuan() {
                this.$router.push("/huiyuan-wch")
            }
        }
    }
</script>

<style scoped>
    .VipTop {
        width: 100vw;
        height: 60px;
        text-align: center;
        background-color: #fad467;
        line-height: 55px;
        font-size: 25px;
        font-weight: 500;
        position: sticky;
        top: 0;
        overflow: hidden;
        font-family: 黑体;
    }

    .VipBG {
        height: 290vh;
        width: 100vw;
        background-image: linear-gradient(#ffdfa4, #fccf4b, #ffd153, #ffd159)
    }

    .VipSheng {
        font-size: 22px;
        line-height: 80px;
        font-weight: 600;
        margin-left: 20px;
        font-family: 黑体;

    }

    a {
        color: red;
        font-weight: bolder
    }

    .a15 {
        color: white;
        font-size: 33px
    }

    .VipQuan {
        width: 90vw;
        height: 390px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 15px;
    }

    .VipQuantop1 {
        margin-left: 10px;
        float: left;
        font-family: 黑体;

    }

    .VipQuan > li {
        text-align: center;
        width: 25%;
        height: 90px;
        float: left;
        display: inline-block;
        margin-top: 20px;
        line-height: 25px;
    }

    .VipQuan > li > img {
        width: 50px
    }

    .VipQuantop2 {
        float: right;
        margin-top: 18px;
        margin-right: 10px;
        font-size: 14px;
        color: #a5a5a5
    }

    .youHuiQuan {
        width: 95%;
        margin-left: 8px;
        margin-bottom: 10px;
    }

    .Vipdiv {
        margin-left: 10px;
        font-size: 15px;
        font-family: 黑体
    }

    .VipSpan {
        display: block;
        font-size: 14px;
    }

    .VipSpanGray {
        color: #acacac;
    }

    .VipSpanGray1 {
        color: #acacac;
        text-align: center;
        font-size: 14px;
        font-family: 幼圆;
        margin-top: 10px;
    }

    .VipSpanGray2 {
        margin: 10px auto 0px;
        width: 80vw;
        height: 1px;
        background-color: #c4c4c4;
    }

    .KaiTong {
        width: 85vw;
        height: 45px;
        background-image: linear-gradient(#ffa97a, #ffa56f, #fd8213, #fda47e);
        text-align: center;
        font-size: 22px;
        color: white;
        font-family: 幼圆;
        border-radius: 15px;
        display: inline-block;
        margin-top: 50px;
        margin-left: 10px;
    }
</style>